<template>
  <div>
		<el-space>
			<el-input v-model="params.name" placeholder="请输入要查询的菜名"></el-input>
			<el-select-v2
				v-model="params.type"
				:options="api.typeList"
				placeholder="请选择菜品类别"></el-select-v2>
			<el-button type="primary" @click="search">查询</el-button>
			<el-button type="success" @click="add">添加膳食</el-button>
		</el-space>
		<section class="food-list">
			<FoodItem v-for="item in tableData.records" :food="item" :update="update" :del="del" />
		</section>
		
		<el-pagination
			background
			v-model:current-page="params.pageNo"
			:page-count="tableData.pages"
			@change="getTable"></el-pagination>
		<el-dialog
			v-model="editDialog.show"
			:title="editDialog.title"
			width="400px"
			:close-on-click-modal="false">
			<Edit v-model:show="editDialog.show" :id="editDialog.id" :getTable="getTable" v-if="editDialog.show" />
		</el-dialog>
  </div>
</template>
<script setup>
import api from '@/api/foodapi'
import { get, post } from '@/axios'
import { reactive, ref } from 'vue'
import Edit from './edit'
import { ElMessageBox } from 'element-plus'
import FoodItem from './components/fooditem'
const tableData = ref([])
const roomNo = ref('')
const editDialog =reactive({
	show: false,
	title: '',
	id: null
})
const params = reactive({
	pageNo: 1,
	pageSize: 10,
	name: '',
	type: ''
})
function getTable () {
	get(api.request_url.list, params, content => {
		console.dir(content)
		tableData.value =content
	})
}
function search () {
	params.pageNo = 1
	params.roomNo = roomNo.value
	getTable()
}
function add () {
	editDialog.id = null
	editDialog.title = '添加膳食'
	editDialog.show = true
}
function update(id) {
	editDialog.id = id
	editDialog.title = '修改膳食'
	editDialog.show = true
}
function del(id) {
	ElMessageBox.confirm('确定要删除该膳食吗？', '删除警告', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
		post(api.request_url.del, { id }, content => {
			getTable()
		})
	}).catch(() => {})
}
getTable()
</script>

<style scoped lang="scss">
.el-pagination, .el-table {
	margin-top: 10px;
}
.el-select {
	width: 120px;
}
.food-list {
	margin-top: 15px;
	display: grid;
	grid-template-columns: repeat(5, 250px);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}
</style>